<template>
  <div class="person">

    <ul>

      <li v-for="item in list" :key="item.id">{{ item.name }}{{ item.age }}</li>
    </ul>
  </div>
</template>



<script lang="ts" setup name="Person">
import { withDefaults } from 'vue';
import type { Persons } from '@/types';

// defineProps不用导入
// import { defineProps } from 'vue';

// 只接受list
// defineProps(['list'])

// 接受list+限制类型
// defineProps<{ list: Persons }>()


//接收list,同时将props保存起来
// let x1 = defineProps(['list'])
// console.log(x1.list);

// 接受list+限制类型
// defineProps<{ list: Persons }>()

// 接受list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: '4', name: '耗能', age: 19 }]
})




// 接收a,同时将props保存起来
// let x = defineProps(['a'])
// console.log(x);




</script>

<style scoped>
.person {
  background-color: rgb(218, 114, 200);
  box-shadow: 0 010px;
  border-radius: 10px;
  padding: 20px;
}

button {
  background-color: darkseagreen;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>